<template>
  <div class="user">
    <div class="user_header">
      <van-uploader v-model="fileList" multiple :max-count="1" />
      <section>
        <router-link custom to="/login" v-slot="{ navigate }" v-if="!token">
           <h1 @click="navigate">立即登录</h1>
        </router-link>
        <p>积分：0</p>
        <span v-if="token" @click="logout">退出登录</span>
      </section>
    </div>
    <van-notice-bar
      color="red"
      background="#fff"
      left-icon="volume-o"
      text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
    />
    <van-cell is-link>
      <template #title>
        <i class="iconfont icon-dingdan"></i>
        <span style="vertical-align: text-bottom">订单</span>
      </template>
    </van-cell>
    <van-grid :border="false">
      <van-grid-item>
        <i class="iconfont icon-daifukuan"></i>
        <span>待付款</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-daifahuo"></i>
        <span>待发货</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-daishouhuo01"></i>
        <span>待收货</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-31daipingjia"></i>
        <span>待评价</span>
      </van-grid-item>
    </van-grid>
    <van-grid :border="false" :column-num="3" class="icon-count">
      <van-grid-item>
        <i class="iconfont icon-yue" style="color:#F86650"></i>
        <span>我的余额</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-kanjia2" style="color:#F86650"></i>
        <span>我的砍价</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-liquan" style="color:#EDB449"></i>
        <span>我的礼券</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-shoucang" style="color:#EDB449"></i>
        <span>我的收藏</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-dizhi" style="color:#5A9FEC"></i>
        <span>我的地址</span>
      </van-grid-item>
      <van-grid-item>
        <i class="iconfont icon-lianxikefu" style="color:#5A9FEC"></i>
        <!-- <i class="iconfont icon-fangxinfei"></i> -->
        <span>联系客服</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import { reactive, toRefs,computed } from "vue";
export default {
  setup() {
    const data = reactive({
      fileList: [{ url:require("../../assets/img/yifei.jpeg")}],
      token: computed(() => localStorage.getItem('token'))
    });
    const logout = () => {
       localStorage.removeItem('token');
    }
    return {
      ...toRefs(data),
      logout
    };
  },
};
</script>
<style lang="scss" scoped>
.user {
  height: 100%;
  background: #e9e9e9;
}
.user_header {
  height: 155px;
  background: #c1b18f;
  display: flex;
  align-items: center;
  padding: 0 20px;
  // 在vue3.0 之前 使用 /deep/ 的写法来穿透 在3.0之后变成了 :deep()
  :deep(.van-image) {
    border-radius: 50%;
  }
  :deep(.van-uploader__preview-delete) {
    border-radius: 50%;
    .van-uploader__preview-delete-icon {
      transform: scale(0.7);
    }
  }
  section {
    color: #fff;
    margin-left: 15px;
    p {
      padding: 5px 10px;
      font-size: 13px;
      background: #b3a078;
      border-radius: 5px;
      margin: 10px auto;
    }
    span {
      font-size: 13px;
    }
  }
}
.van-cell {
  margin-top: 10px;
}
.icon-dingdan {
  color: #f7b94b;
  font-size: 19px;
  margin-right: 10px;
}
.van-grid-item {
  font-size: 14px;
  color: #6d6d6d;
  i {
    font-size: 28px;
    margin-bottom: 5px;
  }
}
.icon-count{
  margin-top: 15px;
  .van-grid-item{
    color: #000;
  }
}
</style>